<!--
 * @description:
 * @fileName: index
 * @author: 17076
 * @date: 2025/3/19-下午4:38
 * @version: V1.0.0
-->

<template>
  <!--对白-->
  <el-row :gutter="10">
    <el-col :span="12">
      <div class="dialogue-content" :style="{ height: $baseTableHeight(-120) + 'px' }">
        <el-empty v-if="dialogueList.length === 0" description="暂无需要设置的对白内容" style="height: 100%">
          <el-button plain @click="handleAddLens">添加对白</el-button>
          <template slot="image">
            <img src="@/assets/common/empty_role.png"/>
          </template>
        </el-empty>
        <div v-for="item in dialogueList" :key="item.id" class="flex-row dialogue-item">
          <div
            :class="['dialogue-lens-image', selectLensData['id'] === item.id ? 'active' : '']"
            :data-ratio="pictureScale"
            @click="handleLensClick(item)"
          >
            <el-image
              :src="downloadUrl + item.fileId"
            />
          </div>
          <el-row :gutter="10" style="flex: 1; margin-left: 10px">
            <el-col v-for="(row, rowIndex) in item['dialogues']" :key="rowIndex" :span="24" style="margin-bottom: 10px">
              <el-col :lg="6" :sm="6" :md="6" :xs="6" :xl="5">
                <el-select v-model="row['narrativeType']" @change="handleAutoSave">
                  <el-option
                    v-for="(option, optionIndex) in dialogueTypeList"
                    :key="optionIndex"
                    :label="option.name"
                    :value="option.code"
                  />
                </el-select>
              </el-col>
              <el-col v-if="row['narrativeType'] !== '3'" :lg="6" :sm="6" :md="6" :xs="6" :xl="5">
                <el-select v-model="row.playRoleId" @change="handleAutoSave">
                  <el-option
                    v-for="(option, optionIndex) in rolesList"
                    :key="optionIndex"
                    :label="option.name"
                    :value="option.id"
                  />
                </el-select>
              </el-col>
              <el-col :lg="8" :sm="8" :md="8" :xs="8" :xl="11">
                <el-input v-model="row['dialogueInfo']" placeholder="请输入对话内容" @input="handleAutoSave" />
              </el-col>
              <el-col :lg="4" :sm="4" :md="4" :xs="4" :xl="3">
                <div class="flex-row flex-center">
<!--                  <i class="el-icon-check row-save" @click="handleSave(item, row)" />-->
                  <i class="el-icon-circle-plus-outline row-add" @click="handleDialogueAdd(item, row)" />
                  <i class="el-icon-delete row-delete" @click="handleDialogueDelete(item, row, rowIndex)" />
                </div>
              </el-col>
            </el-col>
          </el-row>
        </div>
        <el-button v-if="dialogueList.length > 0" plain @click="handleAddLens(1)">添加镜头</el-button>
        <el-button v-if="dialogueList.length > 0 && showSave" plain @click="handleSaveDialogue()">保存对话</el-button>
      </div>
    </el-col>
    <el-col :span="12">
      <base-card :title="`预览(${selectLens['index']})`">
        <div v-if="selectLensData && selectLensData['fileId']" class="preview-content" :style="{ height: $baseTableHeight(-60) + 'px' }">
          <el-image :src="downloadUrl + selectLensData['fileId']" class="preview-image" :data-ratio="pictureScale" />
          <div :style="{ height: $baseTableHeight(350) + 'px', overflowY: 'auto' }">
            <div v-if="formatterDialogues('1').length > 0" class="flex-row voice-content">
              <span>对白</span>
              <div>
                <div
                  v-for="(item, index) in formatterDialogues('1')"
                  :key="index"
                  style="line-height: 20px"
                >{{ `${item['playRoleName']}: ${item['dialogueInfo']}` }}</div>
              </div>
            </div>
            <div v-if="formatterDialogues('3').length > 0" class="flex-row voice-content">
              <span>旁白</span>
              <div>
                <div
                  v-for="(item, index) in formatterDialogues('3')"
                  :key="index"
                  style="line-height: 20px"
                >{{ `${item['dialogueInfo']}` }}</div>
              </div>
            </div>
            <div v-if="formatterDialogues('2').length > 0" class="flex-row voice-content">
              <span>内心对白</span>
              <div>
                <div
                  v-for="(item, index) in formatterDialogues('2')"
                  :key="index"
                  style="line-height: 20px"
                >{{ `${item['playRoleName']}: ${item['dialogueInfo']}` }}</div>
              </div>
            </div>
          </div>
        </div>
        <el-empty v-else description="暂无可预览的数据" :style="{ height: $baseTableHeight(-60) + 'px' }">
          <template slot="image">
            <img src="@/assets/common/empty_role.png"/>
          </template>
        </el-empty>
      </base-card>
    </el-col>
    <!--选择镜头-->
    <select-lens ref="select" :lens-id="selectLens['lensId']" @save="handleSelectLens" />
  </el-row>
</template>

<script>
import SelectLens from '@/views/creativeCenter/playWriting/components/lens/others/SelectLens.vue'
import { commonDownloadFile } from '@/api/config/uploadApi'
import { baseURL } from '@/config'
import { mapGetters } from 'vuex'
import { selectPlayRole } from '@/api/roles'
import {queryLensVoice, saveDialogue} from '@/api/lens'

export default {
  name: 'Index',
  components: { SelectLens },
  props: {
    playId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      // 当前选中镜头的对白列表
      dialogueList: [],
      downloadUrl: baseURL + commonDownloadFile,
      // 选中的镜头数据
      selectLensData: {},
      // 角色数据
      rolesList: [],
      // 显示保存按钮
      showSave: false,
      // 对话类型
      dialogueTypeList: JSON.parse(sessionStorage.getItem('narrativeType'))
    }
  },
  computed: {
    // 分镜数据
    ...mapGetters({
      selectLens: 'lens/selectLens',
      pictureScale: 'lens/pictureScale'
    })
  },
  mounted() {
    this.queryDialogueData()
    this.fetchRoles()
  },
  methods: {
    // 查询对白数据
    queryDialogueData() {
      queryLensVoice({ lensId: this.selectLens['lensId'] }).then(res => {
        this.dialogueList = res.data
        // 判断是否存在对白数据，如果存在则添加一行空数据
        if (res.data.length > 0) {
          res.data.map(item => {
            if (item['dialogues'].length === 0) {
              item['dialogues'] = [{}]
            }
          })
        }
      })
    },
    // 查询角色列表
    fetchRoles() {
      selectPlayRole({ playId: this.playId }).then(res => {
        this.rolesList = res.data.result
      })
    },
    // 格式化数据显示
    formatterDialogues(type) {
      const dialogues = this.$baseLodash.cloneDeep(this.selectLensData['dialogues']) || []
      return dialogues.filter(item => item['narrativeType'] === type)
    },
    // 镜头点击
    handleLensClick(item) {
      this.selectLensData = item
    },
    // 添加一行对白
    handleDialogueAdd(item, subItem) {
      const subIndex = item.dialogues.findIndex(row => row.id === subItem.id)
      item.dialogues.splice(subIndex + 1, 0, {})
      this.showSave = true
    },
    // 删除一行对白
    handleDialogueDelete(item, subItem, subIndex) {
      if (item.dialogues.length === 1) {
        // 直接删除一整条
        this.dialogueList.splice(this.dialogueList.indexOf(item), 1)
        return
      }
      item.dialogues.splice(subIndex, 1)
      this.showSave = true
    },
    // 添加镜头
    handleAddLens(type) {
      this.$refs.select.show(this.dialogueList)
    },
    // 自动保存
    handleAutoSave(val) {
      this.showSave = true
    },
    // 保存对话
    handleSaveDialogue() {
      saveDialogue({ frames: this.dialogueList }).then(res => {
        const { code, msg } = res
        code === 200 ? this.$baseMessage.success(msg || '保存成功') : this.$baseMessage.error(msg || '保存失败')
        this.showSave = false
        this.queryDialogueData()
      })
    },
    // 选中镜头后操作
    handleSelectLens(selectLens) {
      if (selectLens.length > 0) {
        selectLens.map(item => {
          this.dialogueList.push({
            ...item,
            list: [{}]
          })
        })
      }
    }
  }
}
</script>

<style scoped lang="scss">
.dialogue-content {
  color: #FFFFFF;
  background: $base-content-background;
  border-radius: 8px;
  padding: 10px;
  box-sizing: border-box;
  overflow-y: auto;
  // 对白条目
  .dialogue-item {
    margin-bottom: 10px;
    .dialogue-lens-image {
      width: 140px;
      max-height: calc(140px * 9 / 21);
      aspect-ratio: $base-aspect-ratio-1;
      border-radius: 8px;
      border: 1px solid transparent;
      overflow: hidden;
      &[data-ratio="2"] {
        width: 140px;
        max-height: calc(140px * 9 / 16);
        aspect-ratio: $base-aspect-ratio-2;
      }
      &[data-ratio="3"] {
        width: 140px;
        max-height: calc(140px * 2 / 3);
        aspect-ratio: $base-aspect-ratio-3;
      }
      &[data-ratio="4"] {
        height: 100px;
        max-width: calc(140px * 3 / 4);
        aspect-ratio: $base-aspect-ratio-4;
      }
      &[data-ratio="5"] {
        height: 100px;
        max-width: 100px;
        aspect-ratio: $base-aspect-ratio-5;
      }
      &[data-ratio="6"] {
        height: 100px;
        max-width: calc(140px * 4 / 3);
        aspect-ratio: $base-aspect-ratio-6;
      }
      &[data-ratio="7"] {
        height: 100px;
        max-width: calc(140px * 3 / 2);
        aspect-ratio: $base-aspect-ratio-7;
      }
      &[data-ratio="8"] {
        height: 100px;
        max-width: calc(140px * 16 / 9);
        aspect-ratio: $base-aspect-ratio-8;
      }
      .el-image {
        width: 100%;
        height: 100%;
      }
    }
    .active {
      border: 1px solid $base-color-default;
    }
    .row-save {
      margin-top: 10px;
      cursor: pointer;
    }
    .row-add {
      margin-top: 10px;
      margin-left: 10px;
      cursor: pointer;
    }
    .row-delete {
      margin-top: 10px;
      margin-left: 10px;
      cursor: pointer;
    }
  }
}
.preview-content {
  color: #FFFFFF;
  .preview-image {
    width: 100%;
    height: auto;
    border-radius: 8px;
    margin-top: 10px;
    aspect-ratio: $base-aspect-ratio-2;
    &[data-ratio="2"] {
      max-width: 100%;
      height: auto;
      aspect-ratio: $base-aspect-ratio-2;
    }
    &[data-ratio="3"] {
      max-width: 100%;
      height: auto;
      aspect-ratio: $base-aspect-ratio-3;
    }
    &[data-ratio="4"] {
      max-height: 100%;
      width: auto;
      aspect-ratio: $base-aspect-ratio-4;
    }
    &[data-ratio="5"] {
      max-height: 100%;
      width: auto;
      aspect-ratio: $base-aspect-ratio-5;
    }
    &[data-ratio="6"] {
      max-height: 100%;
      width: auto;
      aspect-ratio: $base-aspect-ratio-6;
    }
    &[data-ratio="7"] {
      max-height: 100%;
      width: auto;
      aspect-ratio: $base-aspect-ratio-7;
    }
    &[data-ratio="8"] {
      max-height: 100%;
      width: auto;
      aspect-ratio: $base-aspect-ratio-8;
    }
  }
  .voice-content {
    align-items: center;
    margin-top: 10px;
    >div {
      background: #272C36;
      padding: 10px;
      box-sizing: border-box;
      border-radius: 8px;
      margin-left: 10px;
      font-size: 12px;
      flex: 1;
    }
  }
}
</style>
